<!--
 * @Author: 330GRX 617947173@qq.com
 * @Date: 2023-09-28 20:22:50
 * @LastEditors: 330GRX 617947173@qq.com
 * @LastEditTime: 2023-10-02 12:26:33
 * @FilePath: \Realtime-Chat\web\src\components\ChatInput.vue
 * @Description: 
 * 
 * Copyright (c) 2023 by ${git_name_email}, All Rights Reserved. 
-->
<template>
  <div class="input-container">
    <div class="button-container">
      <div class="emoji">
        <V3Emoji theme="dark" :recent="true" :options-name="optionsName" @clickEmoji="handleEmojiClick($event)" />
      </div>
    </div>
    <form class="input" @submit="sendChat">
      <input type="text" placeholder="请输入您要发送的信息" v-model="msg" @keydown.enter="sendChat" />
      <button class="submit">
        <svg t="1695906210993" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4049" width="28" height="28">
          <path
            d="M1014.543678 9.459202a32.239736 32.239736 0 0 0-34.383718-7.30394L20.66383 371.592232a32.295735 32.295735 0 0 0-20.367832 25.783788 32.303735 32.303735 0 0 0 12.799895 30.255752L348.557141 675.493739l247.813967 335.437248a32.327735 32.327735 0 0 0 30.247752 12.783895 32.255735 32.255735 0 0 0 25.791788-20.367833L1021.847618 43.84292a32.279735 32.279735 0 0 0-7.30394-34.383718zM98.639191 410.663911l762.833742-293.70959-493.019955 493.051955L98.639191 410.663911z m514.699778 514.699778L414.036604 655.589902l493.003955-493.035955-293.70159 762.809742z"
            fill="#ffffff"
            p-id="4050"
          ></path>
        </svg>
      </button>
    </form>
  </div>
</template>

<script setup>
import { ref, defineProps } from 'vue'
import V3Emoji from 'vue3-emoji'
import 'vue3-emoji/dist/style.css'

// emoji中文配置
const optionsName = {
  'Smileys & Emotion': '笑脸&表情',
  'Food & Drink': '食物&饮料',
  'Animals & Nature': '动物&自然',
  'Travel & Places': '旅行&地点',
  'People & Body': '人物&身体',
  Objects: '物品',
  Symbols: '符号',
  Flags: '旗帜',
  Activities: '活动'
}
// 要发送的消息
const msg = ref('')
// 接收父组件传递的handleSendMsg函数
const props = defineProps({
  handleSendMsg: Function
})

/**
 * @description: 处理点击emoji
 * @param {*} emoji
 */
const handleEmojiClick = (emoji) => {
  let message = msg.value
  message += emoji
  msg.value = message
}
/**
 * @description: 处理发送消息
 * @param {*} e 事件对象
 */
const sendChat = (e) => {
  e.preventDefault()
  if (msg.value.length > 0) {
    props.handleSendMsg(msg.value)
  }
  msg.value = ''
}
</script>

<style lang="scss" scoped>
.input-container {
  display: grid;
  height: 10%;
  grid-template-columns: 5% 95%;
  align-items: center;
  // background-color: #080420;
  padding: 0 2rem;
  font-size: 1.2rem;
  .button-container {
    display: flex;
    align-items: center;
    color: white;
    gap: 1rem;
  }
  .input {
    width: 100%;
    border-radius: 2rem;
    display: flex;
    align-items: center;
    gap: 4.5rem;
    background-color: rgb(56, 72, 93);
    input {
      width: 80%;
      height: 60%;
      background-color: transparent;
      color: white;
      border: none;
      padding-left: 1rem;
      &::selection {
        background-color: rgb(100, 182, 135);
      }
      &:focus {
        outline: none;
      }
    }
    button {
      padding: 0.3rem 2rem;
      border-radius: 2rem;
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: rgb(100, 182, 135);
      border: none;
      cursor: pointer;
    }
  }
}
</style>
